<div id="addrepair">
    <div class="full">
        <h3 class="h3-title" style="margin: 10px;">{{$t('bgMgr.addRepair')}}</h3>
        <div>
            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;" :offset="2"><i style="color: red;display: inline-block;">*</i>&nbsp;{{$t('alarm.devNum')}} : &nbsp;</i-col>
                <i-col span="8">
                    <div class="search-wrapper">
                        <i-input v-model.trim="sosoValue" icon="ios-search-outline" :readonly="readonly" @on-change="sosoValueChange" @on-blur="blur" @on-click="focus" @on-focus="focus"></i-input>
                        <transition name="fade">
                            <ul class="search-item-wrapper" v-show="isShowMatchDev">
                                <li class="demo-auto-complete-item" v-for="item in filterData">
                                    <div class="demo-auto-complete-group">
                                        <span>{{ item.groupname }}</span>
                                    </div>
                                    <i-option v-for="option in item.devices" :value="option.groupname" :key="option.groupname">
                                        <span style="color:#B1BBC2" @click="sosoSelect(option)" class="demo-auto-complete-title">{{ option.allDeviceIdTitle }}</span>
                                    </i-option>
                                </li>
                            </ul>
                        </transition>
                    </div>
                </i-col>
                <i-col span="10" style="height: 100%;line-height:32px;padding-left:20px;">
                    <span>
                            <!-- <Icon type="star"></Icon> {{$t("group.groupNameTip")}}  -->
                        </span>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;" :offset="2">{{$t('insure.repairItem')}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-input v-model.trim="repairitem"></i-input>
                </i-col>
                <i-col span="10" style="height: 100%;line-height:32px;padding-left:20px;">
                    <span>
                            <!-- <Icon type="star"></Icon> {{$t("group.userCountTip")}} -->
                        </span>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;" :offset="2">{{$t('insure.repairFee')}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-input v-model.trim="fee"></i-input>
                </i-col>
                <i-col span="10" style="height: 100%;line-height:32px;padding-left:20px;">
                    <span>
                            <!-- <Icon type="star"></Icon> {{$t("group.userCountTip")}} -->
                        </span>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;" :offset="2">{{$t('insure.repairShop')}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-input v-model.trim="repairagent"></i-input>
                </i-col>
                <i-col span="10" style="height: 100%;line-height:32px;padding-left:20px;">
                    <span>
                            <!-- <Icon type="star"></Icon> {{$t("group.userCountTip")}} -->
                        </span>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;" :offset="2">{{$t('insure.repairAddress')}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-input v-model.trim="repairaddress"></i-input>
                </i-col>
                <i-col span="10" style="height: 100%;line-height:32px;padding-left:20px;">
                    <span>
                            <!-- <Icon type="star"></Icon> {{$t("group.userCountTip")}} -->
                        </span>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;" :offset="2">{{$t('insure.repairShopPhone')}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-input v-model.trim="repairphone"></i-input>
                </i-col>
                <i-col span="10" style="height: 100%;line-height:32px;padding-left:20px;">
                    <span>
                            <!-- <Icon type="star"></Icon> {{$t("group.userCountTip")}} -->
                        </span>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;" :offset="2">{{$t('insure.repairShopName')}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-input v-model.trim="repairname"></i-input>
                </i-col>
                <i-col span="10" style="height: 100%;line-height:32px;padding-left:20px;">
                    <span>
                            <!-- <Icon type="star"></Icon> {{$t("group.userCountTip")}} -->
                        </span>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;" :offset="2">{{$t('insure.submitRepairName')}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-input v-model.trim="submitrepairname"></i-input>
                </i-col>
                <i-col span="10" style="height: 100%;line-height:32px;padding-left:20px;">
                    <span>
                            <!-- <Icon type="star"></Icon> {{$t("group.userCountTip")}} -->
                        </span>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;" :offset="2">{{$t('insure.submitRepairPhone')}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-input v-model.trim="submitrepairphone"></i-input>
                </i-col>
                <i-col span="10" style="height: 100%;line-height:32px;padding-left:20px;">
                    <span>
                            <!-- <Icon type="star"></Icon> {{$t("group.userCountTip")}} -->
                        </span>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;" :offset="2">{{$t('monitor.remarks')}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-input v-model.trim="remark"></i-input>
                </i-col>
                <i-col span="10" style="height: 100%;line-height:32px;padding-left:20px;">
                    <span>
                            <!-- <Icon type="star"></Icon> {{$t("group.userCountTip")}} -->
                        </span>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="6" :offset="6">
                    <i-button style="width: 100%" @click="handleSubmit">{{$t("bgMgr.submit")}}</i-button>
                </i-col>
            </Row>
        </div>
    </div>

    <script>
        vueInstanse = new Vue({
            el: "#addrepair",
            i18n: utils.getI18n(),
            data: {
                groups: vRoot.$children[1].groups,
                sosoValue: '',
                readonly: false,
                isShowMatchDev: false,
                filterData: [],
                deviceid: '',
                repairitem: '', //维修项' ,
                fee: '', //多少钱元,精确到小数点后2位
                repairagent: '', //维修店名' ,
                repairaddress: '', //维修店地址' ,
                repairphone: '', //维修店联系电话' ,
                repairname: '', //维修店联系人' ,
                submitrepairname: '', //送修人员名字' ,
                submitrepairphone: '', //送修人员电话' ,
                remark: '', //备注' ,
            },
            methods: {
                sosoSelect: function(device) {
                    this.deviceid = device.deviceid;
                    this.sosoValue = device.allDeviceIdTitle;
                    this.isShowMatchDev = false;
                },
                sosoValueChange: function() {
                    var me = this;
                    var value = this.sosoValue;

                    if (this.timeoutIns != null) {
                        clearTimeout(this.timeoutIns);
                    }

                    if (!value.trim()) {
                        this.filterData = [];
                        return;
                    }

                    if (this.deviceid != null) {
                        this.deviceid = null;
                    }

                    this.timeoutIns = setTimeout(function() {
                        me.filterMethod(value);
                    }, 300);
                },
                focus: function() {
                    this.readonly = false;
                    var me = this;
                    if (this.sosoValue.trim()) {
                        me.sosoValueChange();
                    }
                },
                blur: function() {
                    this.readonly = true;
                    var me = this
                    setTimeout(function() {
                        me.isShowMatchDev = false;
                    }, 300)
                },
                filterMethod: function(value) {

                    this.filterData = []
                    var me = this;
                    value = value.toLowerCase();
                    for (var i = 0; i < this.groups.length; i++) {
                        var group = this.groups[i]
                        if (
                            group.groupname.toLowerCase().indexOf(value) !== -1 ||
                            group.firstLetter.indexOf(value) !== -1 ||
                            group.pinyin.indexOf(value) !== -1
                        ) {

                            this.filterData.push(group);
                        } else {
                            var devices = group.devices
                            var obj = {
                                groupname: group.groupname,
                                devices: []
                            }
                            for (var j = 0; j < devices.length; j++) {
                                var device = devices[j]
                                var devicename = device.devicename;
                                if (
                                    device.devicetitle.toLowerCase().indexOf(value) !== -1 ||
                                    device.allDeviceIdTitle.toLowerCase().indexOf(value) !== -1 ||
                                    devicename.toLowerCase().indexOf(value) !== -1 ||
                                    device.firstLetter.indexOf(value) !== -1 ||
                                    device.pinyin.indexOf(value) !== -1 ||
                                    device.deviceid.toLowerCase().indexOf(value) !== -1
                                ) {
                                    obj.devices.push(device)
                                } else {
                                    if (device.remark) {
                                        if (device.remark.indexOf(value) !== -1) {
                                            obj.devices.push(device)
                                        };
                                    };
                                };
                            }
                            if (obj.devices.length) {
                                this.filterData.push(obj);
                            };
                        };
                    };
                    if (this.filterData.length) {
                        this.isShowMatchDev = true;
                    }
                },
                handleSubmit: function() {
                    if (this.deviceid == "" || this.deviceid == null) {
                        this.$Message.error(vRoot.$t('reportForm.selectDevTip'));
                        return;
                    };
                    var url = myUrls.addRepairRecord();
                    var data = {
                        deviceid: this.deviceid,
                        repairitem: this.repairitem, //维修项' ,
                        fee: this.fee, //多少钱元,精确到小数点后2位
                        repairagent: this.repairagent, //维修店名' ,
                        repairaddress: this.repairaddress, //维修店地址' ,
                        repairphone: this.repairphone, //维修店联系电话' ,
                        repairname: this.repairname, //维修店联系人' ,
                        submitrepairname: this.submitrepairname, //送修人员名字' ,
                        submitrepairphone: this.submitrepairphone, //送修人员电话' ,
                        remark: this.remark, //备注' ,
                    };

                    utils.sendAjax(url, data, this.doAddcallback);
                },
                doAddcallback: function(resp) {
                    if (resp.status == 0) {
                        this.$Message.success(vRoot.$t('message.addSucc'));
                    } else {
                        this.$Message.error(resp.cause);
                    }
                },
            },
            mounted: function() {
                this.timeoutIns = null;
            }
        })
    </script>
</div>